<template>
    <div class="body-box">
        <!-- 顶部菜单 -->
        <div class="header flex">
            <div class="header-left">
                <img src="@/assets/img/common/logo.png" alt="">
            </div>
            <div class="header-right flex">
                <div class="nav flex flex-align-center">
                    <ul>
                        <li v-for="(item,index) in navArr" :key="index" :class="{active:item.status}" @click="onMenuChangeFn(index)">
                            {{item.name}}
                            <span class="line" v-if="item.status"></span>
                        </li>
                    </ul>
                </div>
                <!-- 顶部左侧用户及消息 -->
                <div class="tools-Box flex flex-align-center"  @mouseleave="closeTipsFn">
                    <div class="user-box flex flex-align-center" @mouseenter="toolsshow = true" >
                        <img src="@/assets/img/common/user.png">
                        <span>{{userNikeName}}</span>
                        <div class="user-tools-box" v-if='toolsshow' @mouseleave="toolsshow = false">
                            <ul>
                                <li @click="onMangeFn">
                                    <img src="@/assets/img/common/zh.png" alt="账号管理">
                                    账号管理
                                </li>
                                <li @click="onQuitFn">
                                     <img src="@/assets/img/common/quit.png" alt="退出">
                                    退出登录
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="info-box">
                        <img class="info-img" src="@/assets/img/common/info.png" alt="消息" @click="onInfoFn">
                        <div class="info-icon" v-if="count>0">{{count}}</div>
                        <img class="menu-img" src="@/assets/img/common/menu.png" alt="更多"  @mouseenter="kfshow = true">
                          <div class="user-tools-box box-info" v-if='kfshow' @mouseleave="kfshow = false">
                            <ul>
                                <li @click="onKfuFn">
                                    <img src="@/assets/img/common/zx.png" alt="">
                                    资讯客服
                                </li>
                                <li @click="onHelpFn">
                                     <img src="@/assets/img/common/zx.png" alt="">
                                    帮助说明
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 客户端关闭/最小化/最大化 -->
                    <div class="menu-box" hidden>

                    </div>
                </div>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="content flex">
            <LeftMenu/>
            <div class="content-right flex-1">
                <router-view :key="this.$route.path"></router-view>
            </div>
        </div>
        <frameBox></frameBox>
    </div>
</template>
<script>
import LeftMenu from './leftMenu'
import frameBox from './frameBox'
export default {
    components:{
        LeftMenu,
        frameBox
    },
    data () {
        return {
            navArr:[
                {name:"文件管理",status:1},
                {name:"部门管理",status:0},
                {name:"群组管理",status:0},
                {name:"操作日志",status:0},
                {name:"管理控制台",status:0}
            ],
            toolsshow:false,
            kfshow:false,
            count:0, // 获取用户未读消息
            userNick:'' // 用户昵称
        }
    },
    mounted () {
        this.getUnreadCount();
    },
    computed: {
        messageCount(){ //未读消息总数变化
            return this.$store.getters.getMessageCount
        },
        userNikeName(){
            return this.$store.getters.getUserNikeName
        }
    },
    watch: {
        // 监听用户未读消息变化
        messageCount(news,old){
            this.count = news;
        },
    },
    methods: {
        // 顶部菜单点击事件
        onMenuChangeFn(i){
            this.navArr.forEach((element,index) => {
                if(index === i){
                    element.status = 1;
                    if(element.name == '文件管理'){
                        this.$store.commit('setTopNavTab',element.name);
                        this.$router.push({name:'Filemanage'});
                    }
                }else{
                    element.status = 0;
                }
            });
        },

        // 账号管理
        onMangeFn(){
            this.$router.push('/modifyinfo');
            this.$store.commit('setTopNavTab','账号管理');
            this.navArr.forEach((element,index) => {
                element.status = 0;
            });
        },

        // 退出登录
        onQuitFn(){
            this.$router.push('/');
            location.reload();
        },

        //  帮助说明
        onHelpFn(){

        },

        // 资讯客服
        onKfuFn(){
            this.$store.commit('isshowMask',true);
            this.$store.commit('isshowMaskType','showServer');
        },

        // 关闭客服，退出窗口
        closeTipsFn(){
            this.toolsshow = false,
            this.kfshow = false
        },

        // 消息列表
        onInfoFn(){
            // 取消左侧菜单选中状态
            this.navArr.forEach((element,index) => {
                element.status = 0;
            });
            this.$store.commit('setTopNavTab','消息列表');
            this.$router.push('/message');
        },

        // 获取用户未读消息及用户信息
        async getUnreadCount(){
            // 获取未读消息
            var {data} = await this.$https.post('message/getUnreadCount',{});
            this.$store.commit('setMessageCount',data.count);
            // 获取用户基本信息
            var {data} = await this.$https.post('member/getinfo',{});
            this.$store.commit('setUserNikeName',data.userNick);
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/common/layout.less);
</style>


